//模拟数据库
let user = [{ id: 1, xinxi: "源盛广场园区主题介绍", onefenlei: "2", twofenlei: "12",zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "200",  },
{id: 2, xinxi: "源盛广场园区主题介绍", onefenlei: "3", twofenlei: "13",zhuangtai:"草稿" , name: "admin", time: "2021-06-09 12:12:12", reading: "100", },
{ id: 3, xinxi: "源盛广场园区主题介绍", onefenlei: "4", twofenlei: "14",zhuangtai:"已发布" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
{id: 4, xinxi: "源盛广场园区主题介绍", onefenlei: "5", twofenlei: "15", zhuangtai:"草稿" , name: "admin", time: "2021-06-09 12:12:12", reading: "100",  },
{id: 5, xinxi: "源盛广场园区主题介绍", onefenlei: "6", twofenlei: "16", zhuangtai:"草稿" , name: "admin", time: "2021-06-09 12:12:12", reading: "200", },
];


 //声明区域
 window.onload = function () {
    displayData();   //显示事件
    addBtn3Event();  //添加删除事件
    ad();
    getDate();
  }

//判断是否加载
  function ad() {
    if (getDate().length == 0) {
      saveDate(user);
    }
  }

//存储到浏览器函数
function saveDate(data) {
  sessionStorage.setItem("user", JSON.stringify(data));
}
//浏览器里获取函数
function getDate() {
  let data = sessionStorage.getItem("user");
  if (data !== null) {
    return JSON.parse(data);
  } else {
    return [];
  }
}

  //文档碎片
  function displayData(){
    $("#tbCard").html("")
    //文档碎片
    let fragment1 = document.createDocumentFragment();
    for (let i = 0; i <3; i++) {
      let tr = document.createElement("tr");
      tr.innerHTML = `
      <td>${user[i].id}</td>
      <td>${user[i].xinxi}</td>
      <td>${user[i].onefenlei}</td>
      <td>${user[i].twofenlei}</td>
      <td>${user[i].zhuangtai}</td>
      <td>${user[i].name}</td>
      <td>${user[i].time}</td>
      <td>${user[i].reading}</td>
      <td>
          <button class="btn2">编辑</button>
          <button class="btn3" data-index='${user[i].id}'>删除</button>
      </td>`;

      fragment1.appendChild(tr);
    }
    $("#tbCard").append(fragment1);
  }

  function onlouad(n,a) { //分页调用函数
    $("#tbCard").html("")
    //文档碎片
    let fragment1 = document.createDocumentFragment();
    for (let i = n; i < a; i++) {
      let tr = document.createElement("tr");
      tr.innerHTML = `
      <td>${user[i].id}</td>
      <td>${user[i].xinxi}</td>
      <td>${user[i].onefenlei}</td>
      <td>${user[i].twofenlei}</td>
      <td>${user[i].zhuangtai}</td>
      <td>${user[i].name}</td>
      <td>${user[i].time}</td>
      <td>${user[i].reading}</td>
      <td>
          <button class="btn2">编辑</button>
          <button class="btn3" data-index='${user[i].id}'>删除</button>
      </td>`;

      fragment1.appendChild(tr);
    }
    $("#tbCard").append(fragment1);
  }


  //添加删除事件
  function addBtn3Event() {
    $("#tbCard").on("click", ".btn3", function (e) {
      let id = $(e.target).attr("data-index");
      Btn3UserDatadById(id);
      displayData();

    })
  }


  //根据id，删除对应数组
  function Btn3UserDatadById(id) {
    for (let i = 0; i < user.length; i++) {
      if (user[i].id == id) {
        user.splice(i, 1);
        break;
      }
    }
  }

   //添加
  //获取新增标签对象
  let btnCardtianjia = document.getElementById('btnCardtianjia');
  let MaddModle = document.getElementById('MaddModle');
 
  //获取两个按钮
  let oBtntianjia = document.getElementById('hxtianjia')
  let oBtnQuxiao = document.getElementById("hxcell")

  // 新增

  btnCardtianjia.onclick = function () {
    MaddModle.style.display = 'block'
  }
  //声明变量
  let information = document.getElementById("information");
  let onefenlei = document.getElementById("onefenlei");
  let twofenlei = document.getElementById("twofenlei");
  let faburen = document.getElementById("faburen");
  
  hxtianjia.onclick=function(){
     informationinput=information.value;
  onefenleiinput=onefenlei.value;
  twofenleiinput=twofenlei.value;
  fabureninput=faburen.value;
    user.push({
        xinxi:informationinput , onefenlei: onefenleiinput, twofenlei: twofenleiinput,
        fabu:fabureninput, id:"",xinxi:"",zhuangtai:"",time:"",reading:'',name:'',
        
      });
      displayData();
      paging();
      MaddModle.style.display = 'none';
  }
  oBtnQuxiao .onclick=function(){
    MaddModle.style.display = 'none'
  }

   //修改
  //获取修改标签对象
  // let btn2 = document.getElementsByClassName('btn2');
  // let hxchasi = document.getElementById('hxchasi');
  // let manChasn = document.getElementById("manChasn").value;
  // let manChasac = document.getElementById("manChasac").value;
  // let manChasm = document.getElementById("manChasm").value;
  //获取两个按钮
  let manCancel = document.querySelector('.manCancel');
  let manBaocun = document.querySelector(".manBaocun");

  //打开修改界面
  // $("tbody").on("click", ".btn2", function () { //点击查看按钮触发的动作
  //   $("#hxchasi").show();
  // });

  // manBaocun.onclick=function(){
  //   user.splice({
  //       xinxi:"manChasn",zhuangtai:"manChasac",name:"manChasm",id:"",
  //       time:"",onefenlei: "",twofenlei: "",
  //     });
  //     displayData();
  // }
  // manBaocun.onclick = function () {
  //   hxchasi.style.display = 'none';
  // }
  
  // manCancel.onclick = function () {
  //   hxchasi.style.display = 'none';
  // }
  
  //修改
  $("#tbCard").on("click", "#Amend", function () {
    let hxchasi=document.getElementById('hxchasi');
    hxchasi.style.display = 'block';
    let id = $(this).attr("data-index");
    $(".baocun").click(function () {
      hxchasi.style.display = 'none';
      let xinxi = $("#EditorChasn").val();
      let zhuangtai = $("#EditorChasac").val();
      let name = $("#name").val();
      let data = getDate();
      console.log(data);
      for (let i = 0; i < data.length; i++) {
        if (data[i].id == id) {
          data[i].xinxi = EditorChasn;
          data[i].zhuangtai = EditorChasac;
          data[i].name = name;
        }
        saveDate(data);
        displayData();
      }
    });
  });
  let hxchasi=document.getElementById('hxchasi');
  //数据修改的模态框隐藏
  $("#hxchasi").on("click", ".xgcancel", function () {
    hxchasi.style.display = 'none';
  });

  //分页
  paging();
  function paging() {
    let page = 1;//第几页
    let no = 0;//显示的页数的第一个对象是数组中的第几个对象，初始下标为0
    let serialNumber = user.length;//序号
    onlouad(0, 3)//初始页面信息，第一页
    $("#inputPage").val(page);//页码
   

    // 下一页
    $("#nextpage").click(function () {
      if (no + 3 < serialNumber) {//如果no+5小于数据条数
        no += 3;
        page++;
        $("#inputPage").val(page);
        if (serialNumber >= (no + 3)) {
          onlouad(no, no + 3);
        } else (
          onlouad(no, serialNumber)

        )
      }

    });

    // 上一页
    $("#lastpage").click(function () {
      if (no - 3 >= 0) {
        no -= 3;
        page--;
        $("#inputPage").val(page);
        onlouad(no, no + 3);
      }
    });
  }



  //查询
function choice(obj) {
  console.log("obj",obj.value)
  let i = $(obj).val();
  if (i == 2) {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user);
    console.log("进入已发布");
    showChoice(user);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < user.length; i++) {
        if (`${user[i].zhuangtai}` == "已发布") {
          $(`#tbCard`)[0].innerHTML += `<tr>
          <td>${data[i].id}</td>
          <td>${data[i].xinxi}</td>
          <td>${data[i].onefenlei}</td>
          <td>${data[i].twofenlei}</td>
          <td>${data[i].zhuangtai}</td>
          <td>${data[i].name}</td>
          <td>${data[i].time}</td>
          <td>${data[i].reading}</td>
          <td>
              <button class="btn2">编辑</button>
              <button class="btn3" data-index='${data[i].id}'>删除</button>
          </td>

    </tr>
          `;
        }
      }
    }
  } else if (i == 3) {
    let user = JSON.parse(sessionStorage.getItem("user"));
    console.log(user);
    console.log("进入草稿");
    showChoice(user);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < user.length; i++) {
        if (`${user[i].zhuangtai}` == "草稿") {
          $(`#tbCard`)[0].innerHTML += `<tr>
          <td>${data[i].id}</td>
          <td>${data[i].xinxi}</td>
          <td>${data[i].onefenlei}</td>
          <td>${data[i].twofenlei}</td>
          <td>${data[i].zhuangtai}</td>
          <td>${data[i].name}</td>
          <td>${data[i].time}</td>
          <td>${data[i].reading}</td>
          <td>
              <button class="btn2">编辑</button>
              <button class="btn3" data-index='${data[i].id}'>删除</button>
          </td>

      </tr>
          `;
        }
      }
    }
  }  else if (i == 1) {
    let messages = JSON.parse(sessionStorage.getItem("user"));
    console.log(messages);
    console.log("进入全部");
    showChoice(messages);
    function showChoice(data) {
      $("#tbCard")[0].innerHTML = "";
      for (let i = 0; i < messages.length; i++) {
        $(`#tbCard`)[0].innerHTML += `<tr>
        <td>${data[i].id}</td>
          <td>${data[i].xinxi}</td>
          <td>${data[i].onefenlei}</td>
          <td>${data[i].twofenlei}</td>
          <td>${data[i].zhuangtai}</td>
          <td>${data[i].name}</td>
          <td>${data[i].time}</td>
          <td>${data[i].reading}</td>
          <td>
              <button class="btn2">编辑</button>
              <button class="btn3" data-index='${data[i].id}'>删除</button>
          </td>
    </tr>
          `;
      }
    }
  }
}